<template>
  <div>
    <a-card>
      <div class="search">
        <a-form layout="horizontal">
          <div>
            <a-row>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="产品"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  :required="true"
                >
                  <a-select placeholder="请选择" v-model="productId">
                    <a-select-option
                      v-for="item in productList"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.productName }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="数据块"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  :required="true"
                >
                  <a-select placeholder="请选择" v-model="productDataId">
                    <a-select-option
                      v-for="item in productDataList"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.dataName }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="日期"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  :required="true"
                >
                  <a-range-picker
                    @change="onChangeRangePicker"
                    style="width: 100%"
                    format="YYYY-MM-DD"
                    valueFormat="YYYY-MM-DD"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="统计周期"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  :required="true"
                >
                  <a-select placeholder="请选择" v-model="timeGranularity">
                    <a-select-option value="1">五分钟</a-select-option>
                    <a-select-option value="2">小时</a-select-option>
                    <a-select-option value="3">天</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-button
                    type="primary"
                    style="margin-left: 20px"
                    @click="searchHandle"
                    >查询</a-button
                  >
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
    </a-card>
    <div style="min-height: 20px" />
    <a-card>
      <div id="chart" :style="{ width: '1550px', height: '400px' }"></div>
    </a-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { productPage } from "@/services/product";
import { productDataPage } from "@/services/productData";
import { devicePage } from "@/services/device";
import { querySummary } from "@/services/deviceData";
export default {
  name: "Dashboard",
  data() {
    return {
      productId: "",
      deviceId: "",
      startTime: "",
      endTime: "",
      productDataId: "",
      dataUnit: "",
      productList: [],
      productDataList: [],
      xData: [],
      deviceList: [],
      lengedList: [],
      chartData: [],
      charts: "",
      timeGranularity: "",
    };
  },
  watch: {
    productId() {
      this.getProductDataList();
      this.getDeviceList();
    },
    productDataId(val) {
      this.productDataList.forEach((item) => {
        if (item.id === val) this.dataUnit = item.dataUnit;
      });
    },
  },
  mounted() {
    this.charts = echarts.init(document.getElementById("chart"));
    this.drawLine("chart");
    this.getProductList();
  },
  methods: {
    onChangeRangePicker(value, dateString) {
      this.startTime = dateString[0];
      this.endTime = dateString[1];
    },
    // 获取产品下拉列表
    getProductList() {
      productPage({ entity: { status: 1 } }).then((rep) => {
        this.productList = rep.data.data.records;
      });
    },
    // 获取解析协议下拉列表
    getProductDataList() {
      productDataPage({
        entity: { status: 1, productId: this.productId },
      }).then((rep) => {
        this.productDataList = rep.data.data.records;
      });
    },
    // 获取设备下拉列表
    getDeviceList() {
      devicePage({
        entity: { status: 1, productId: this.productId },
      }).then((rep) => {
        this.deviceList = rep.data.data.records;
      });
    },
    searchHandle() {
      if (
        this.productId === "" ||
        this.productDataId === "" ||
        this.timeGranularity === "" ||
        this.startTime === "" ||
        this.endTime === ""
      ) {
        this.$message.error("必填项未填");
        return;
      }
      // 统计有几条线
      this.xData = [];
      this.chartData = [];
      this.deviceList.forEach((item) => {
        this.lengedList.push(item["deviceName"]);
      });
      querySummary({
        productDataId: this.productDataId,
        timeGranularity: this.timeGranularity,
        startTime: this.startTime,
        endTime: this.endTime,
      }).then((rep) => {
        if (rep.data.data != null && rep.data.data.length != 0) {
          if (
            rep.data.data[0].items != null &&
            rep.data.data[0].items.length != 0
          ) {
            rep.data.data[0].items.forEach((item) => {
              this.xData.push(item.dataCreateTime);
            });
            rep.data.data.forEach((item) => {
              var dataItem = {};
              dataItem.name = item.deviceName;
              dataItem.type = "line";
              dataItem.data = [];
              item.items.forEach((item) => {
                dataItem.data.push(item.dataContentAvg);
              });
              this.chartData.push(dataItem);
            });
            this.drawLine("chart");
          } else {
            this.drawLine("chart");
          }
        } else {
          this.drawLine("chart");
        }
      });
    },
    // 绘图
    drawLine() {
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.lengedList,
        },
        grid: {
          left: "2%",
          right: "1%",
          bottom: "6%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: this.xData,
          boundaryGap: false,
          axisLabel: {
            rotate: 60,
          },
        },
        yAxis: {
          name: "摄氏度",
          min: -20,
          max: 80,
        },
        series: this.chartData,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 5px;
}
.fold {
  width: calc(100% - 216px);
  display: inline-block;
}
.operator {
  margin-bottom: 18px;
}
@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
